Vue.component('my-post', {
    props: ['title'],
    template: `
    <div class="post">
        <h2>{{title}}</h2>
        <slot></slot>
        <p>底部内容</p>
    </div>`
})
Vue.component('tab-card1', {
    template: `
    <div class="post">
        <h2>card1</h2>
        <input type="text">
        <p>底部内容</p>
    </div>`
})
Vue.component('tab-card2', {
    template: `
    <div class="post">
        <h2>card2</h2>
        <button>card2</button>
        <p>底部内容card2</p>
    </div>`
})
Vue.component('my-tr', {
    template: `
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
   `
})

const app = new Vue({
    el: '#app',
    data: {
        isShow: true,
        isIf: true,
        a: 12,
        b: 2,
        text: '',
        currentCom: ''
    },
    computed: {
        c() {
            return this.a ** this.b
        }
    },
    methods: {
        handleClick(p, e) {
            console.log(p)
            console.log(event)
            console.log(e)
        },
        switchCom(com) {
            this.currentCom = com
        }
    }
})
// input,change
